<template>
  <div id="inspection-rule">
    <v-header title="证书管理" :showDownloadBtn = "false" :saveShow = "false"></v-header>
    <div class="main-cont">
      <iToolbar v-on:click="handleToolClick" :buttonsObj="buttonsObj"></iToolbar>
      <el-container>
        <el-main>
          <el-table  :data="tableData">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="keycode" label="证书编号"></el-table-column>
            <el-table-column prop="KeyType" label="证书类型"></el-table-column>
            <el-table-column prop="KeyPwd" label="秘钥密码" width="280px"></el-table-column>
            <el-table-column prop="FilePwd" label="文件密码" width="280px"></el-table-column>
            <el-table-column prop="Uploadtime" label="上传时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini"  v-on:click="ruleUpdate(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </el-main>
      </el-container>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="cancel('ruleForm')" v-if="addOrUpsate == 'add'" width="900px">
      <el-form :model="formData" ref="ruleForm" :rules="rules" label-position="right">
        <el-row>
          <el-col :span='12'>
            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="keyCode">
              <el-input v-model="formData.keyCode" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="keyType">
              <el-select popper-class="zIndex-popper" v-model="formData.keyType" placeholder="请选择">
                <el-option label = 'jks' value = 'jks'></el-option>
                <el-option label = 'pkcs12' value = 'pkcs12'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='12'>
            <el-form-item label="文件密码" :label-width="formLabelWidth" prop="filePwd">
              <el-input v-model="formData.filePwd" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label="秘钥密码" :label-width="formLabelWidth" prop="keyPwd">
              <el-input v-model="formData.keyPwd" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='12'>
            <el-form-item label="证书别名" :label-width="formLabelWidth" prop="alias">
              <el-input v-model="formData.alias" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <!--http://192.168.0.132:6080/fsoms-->
            <el-form-item label="文件上传" :label-width="formLabelWidth" prop="fileList" ref='fileForm'>
              <el-upload
                ref="upload"
                name="file"
                :data="formData"
                class="upload-demo"
                action="/net/env/addKeyInfo.do"
                multiple
                :limit="1"
                :file-list="formData.fileList"
                :on-error="uploadError"
                :on-success="uploadSuccess"
                :on-change="handleChange"
                :auto-upload="false">
                <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset()">重置</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click.native="ruleCreate('ruleForm', addOrUpsate)">确定</el-button>
      </div>
    </el-dialog>
    <!--查看详情-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" v-else width="900px">
      <el-form :model="editData" label-position="right">
        <el-row>
          <el-col :span='12'>
            <el-form-item label="证书编号" :label-width="formLabelWidth">
              <el-input v-model="editData.keycode" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label="证书类型" :label-width="formLabelWidth">
              <el-select popper-class="zIndex-popper" :disabled="true" v-model="editData.KeyType" placeholder="请选择">
                <el-option label = 'jks' value = 'jks'></el-option>
                <el-option label = 'pkcs12' value = 'pkcs12'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='12'>
            <el-form-item label="文件密码" :label-width="formLabelWidth">
              <el-input v-model="editData.FilePwd" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label="秘钥密码" :label-width="formLabelWidth">
              <el-input v-model="editData.KeyPwd" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='12'>
            <el-form-item label="上传时间" :label-width="formLabelWidth">
              <el-input :value="editData.Uploadtime || ''"  autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="公钥信息" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :disabled="true"
                placeholder="请输入内容"
                :value="editData.Cert || ''">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  import iToolbar from '../../../iapadmin/comm/iToolbar/iToolbar'
  import {VHeader} from '../../../../components'
  // import Msg from '../../../../assets/js/msg'
  import { getDateTime } from '../../../../assets/js/index'
  export default {
    name: 'inspection-rule',
    components: {
      iToolbar: iToolbar,
      VHeader
    },
    data () {
      return {
        addOrUpsate: '',
        dialogFormVisible: false,
        dialogTitle: '',
        initFormData: {},
        editData: {},
        fileData: {},
        download: false,
        save: false,
        dialogDetailVisible: false,
        buttonsObj: [
          {
            text: '新增',
            oprType: 'addRule'
          }
        ],
        tableData: [],
        formLabelWidth: '120px',
        formData: {
          filePwd: '',
          keyPwd: '',
          keyCode: '',
          keyType: '',
          alias: '',
          fileList: []
        },
        // 校验规则
        rules: {
          filePwd: [
            { required: true, message: '请输入容器密码', trigger: 'blur' }
          ],
          keyCode: [
            { required: true, message: '请输入秘钥编号', trigger: 'blur' }
          ],
          fileList: [
            {
              type: 'array', required: true, message: '请选择文件', trigger: 'change'
            }
          ],
          keyPwd: [],
          alias: []
        },
        // 分页数据
        total: 0,
        currentPage: 1,
        pageSize: 10
      }
    },
    methods: {
      // 获取所有列表
      getAllData (pageNum = 1, pageSize = 10) {
        ajax.post(api.GW_CER, {
          pageNum: pageNum,
          pageSize: pageSize
        }).then(res => {
          if (res.list.length > 0) {
            this.total = res.total
            this.pageSize = res.pageSize
            let ruleArr = res.list
            let changeArr = []
            ruleArr.forEach((item, key) => {
              item.Uploadtime = getDateTime(new Date(item.Uploadtime), 'ss')
              changeArr.push(item)
            })
            this.currentPage = pageNum
            this.tableData = changeArr
          }
        }).catch(() => {})
      },
      // 工具栏操作
      handleToolClick (opt) {
        switch (opt) {
          case 'addRule':
            this.addRule()
            break
          default:
            break
        }
      },
      // 文件上传成功钩子
      uploadSuccess (res, file, fileList) {
        this.getAllData()
        this.dialogFormVisible = false
        this.files = {}
        fileList = []
      },
      // 文件上传失败钩子
      uploadError (err, file, fileList) {
        this.$message({
          type: 'error',
          message: JSON.parse(err.message).errorMsg
        })
      },
      handleChange (file, fileList) {
        this.formData.fileList = fileList
        this.$refs.fileForm.clearValidate()
      },
      // 提交保存新增的校验规则
      ruleCreate (formName, addOrUpsate = 'add') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (addOrUpsate === 'add') {
              // if (Object.keys(this.files).length !== 0) {
                this.$refs.upload.submit()
              // } else {
              //   Msg.alert('请选择文件')
              // }
            }
          } else {
            return false
          }
        })
      },
      addRule () {
        this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
        this.dialogTitle = '新增检查规则'
        this.addOrUpsate = 'add'
        this.dialogFormVisible = true
      },
      cancel (formName) {
        this.formData = JSON.parse(JSON.stringify(this.initFormData))
        this.$refs[formName].clearValidate()
        this.dialogFormVisible = false
      },
      // 查看证书详细信息
      ruleUpdate (certData) {
        this.addOrUpsate = 'update'
        this.dialogTitle = '证书详细信息'
        this.editData = JSON.parse(JSON.stringify(certData))
        this.dialogFormVisible = true
      },
      // 切换分页
      handleCurrentChange (val) {
        this.getAllData(val)
      },
      // 重置表单
      reset () {
        this.formData = JSON.parse(JSON.stringify(this.initFormData))
        this.$refs.ruleForm.clearValidate()
      }
    },
    created () {
      this.getAllData()
      this.initFormData = JSON.parse(JSON.stringify(this.formData))
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #inspection-rule
    height 100%
    .main-cont
      width 100%
      height calc(100% - 62px)
      overflow: auto
      overflow-x hidden
      padding 10px 0 0 10px
    .el-dialog
      .el-col
        padding 0 12px
    .el-select
      width 100%
    .el-input
      width 100%
</style>
